<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('生成个人信息')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="randomPeopleInfo-form">
                <div class="select-list">
                    <ul>
                        <li>
                            生成数量：
                            <select name="generateCount" style="width: 60px;" >
                                <option th:value="20" th:text="20" ></option>
                                <option th:value="50" th:text="50" ></option>
                                <option th:value="100" th:text="100" ></option>
                                <option th:value="500" th:text="500" ></option>
                                <option th:value="1000" th:text="1000" ></option>
                            </select>
                        </li>
                        <li>
                            性别：
                            <select name="gender" style="width: 60px;" >
                                <option value="-1" >任意</option>
                                <option th:value="1" th:text="男"></option>
                                <option th:value="0" th:text="女"></option>
                            </select>
                        </li>
                        <li>
                            地区：
                            <select id="selProvince" name="idCardNoProvinceCode" class="select2" style="width: 150px;" >
                                <option value="">任意</option>
                                <option th:each="p : ${provinceList}" th:value="${p.code}" th:text="${p.name}" ></option>
                            </select>
                            <select id="selCity" name="idCardNoCityCode" class="select2" style="width: 150px;" >
                                <option value="">任意</option>
                            </select>
                            <select id="selCounty" name="idCardNoCountyCode" class="select2" style="width: 150px;" >
                                <option value="">任意</option>
                            </select>
                        </li>
                        <li>
                            每人银行卡数量：
                            <select name="bankCardNoCountOfEachPeople" style="width: 50px;" >
                                <option th:value="1" th:text="1" ></option>
                                <option th:value="2" th:text="2" ></option>
                                <option th:value="3" th:text="3" ></option>
                                <option th:value="4" th:text="4" ></option>
                                <option th:value="5" th:text="5" ></option>
                            </select>
                        </li>
                        <li>
                            每张银行卡手机号相同：：
                            <select name="mobileOfEachPeopleIsTheSame" style="width: 50px;" >
                                <option th:value="true" th:text="是" ></option>
                                <option th:value="false" th:text="否" ></option>
                            </select>
                        </li>
                        <li>
                            银行卡类型：
                            <select name="bankCardType" style="width: 100px;" >
                                <option value="-1" >任意银行</option>
                                <option th:each="m,mStat : ${bankCardTypeList}" th:value="${mStat.index}" th:text="${m.cnName}" ></option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;生成</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="resetForm()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">

    var prefix = ctx + "randomPeopleInfo";

    $(function() {
        var options = {
            url: prefix + "/generateRandomPeopleInfo",
            modalName: "生成个人信息",
            pagination: false,
            firstLoad: false,
            columns: [
                {
                    title: '序号',
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                },
                {
                    field: 'peopleName',
                    title: '姓名'
                },
                {
                    field: 'peopleGender',
                    title: '性别'
                },
                {
                    field: 'peopleAge',
                    title: '年龄'
                },
                {
                    field: 'peopleBirthday',
                    title: '出生日期'
                },
                {
                    field: 'peopleIdCardNo',
                    title: '身份证号码'
                },
                {
                    title: '身份证地区',
                    formatter: function (value, row, index) {
                        return row.idCardAreaInfo.province.name + '-' + row.idCardAreaInfo.city.name + '-' + row.idCardAreaInfo.county.name;
                    }
                },
                {
                    field: 'peopleMobile',
                    title: '银行预留手机号'
                },
                {
                    field: 'peopleBankCard.cardNo',
                    title: '银行卡号'
                },
                {
                    title: '银行卡类型',
                    formatter: function (value, row, index) {
                        return row.peopleBankCard.cnName + '-' + row.peopleBankCard.enName;
                    }
                }]
        };
        $.table.init(options);

        $(".select2").select2({width:'80px'});

        $("#selProvince").bind("change", function () {
            selAreaChange("selProvince", "selCity", "cityList");
            selAreaChange("selCity", "selCounty", "countyList");
        });
        $("#selCity").bind("change", function () {
            selAreaChange("selCity", "selCounty", "countyList");
        });

        $(".no-records-found > td").text("首次加载页面请手动点击[生成]按钮");
    });

    function selAreaChange(selId1, selId2, path) {
        $("#" + selId2 + " option[value != '']").remove();
        var code = $("#" + selId1).val();
        if (code === "") {
            return;
        }
        $.ajax({
            url: prefix + "/" + path + "/" + code,
            type: "post",
            success: function (result) {
                if (result.code === 200) {
                    $.each(result.data, function (i, v) {
                        $("#" + selId2).append("<option value='" + v.code + "'>" + v.name + "</option>");
                    });
                } else {
                    $.modal.alertWarning(result.msg);
                }

            }
        });
    }

    function resetForm() {
        document.getElementById("randomPeopleInfo-form").reset();
    }

</script>
</body>
</html>
